import { formatter } from "element-plus";

export function getGrid({ top = 30, left = 20, right = 10, bottom = 0 }) {
    const grid = {
        top: top,
        left: left,
        right: right,
        bottom: bottom,
        containLabel: true,
    }
    return grid;
}
/**
 * 拖动组件
 * @param {*} config
 * @returns
 */
export function getDataZoom({ show = true, type = 'slider', orient = 'horizontal', start = 0, end = 5 }) {
    const dataZoom = {
        type: type,//slider
        showDetail: false,
        orient: orient,
        bottom: 23,
        show: show,
        brushSelect: false, // 是否开启刷选功能  false-表示不能改变滚动条长度 默认true
        //数据窗口范围的起始数值和结束数值
        startValue: start,
        endValue: end,
        handleSize: 0,
        moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
        // "borderRadius": 5,
        // "borderColor": "#093683", //滚动条边框颜色
        fillerColor: '#005AFF', //选中的滑动条区域的颜色
        borderColor: 'transparent',
        backgroundColor: '#efefef',   //两边未选中的滑动条区域的颜色
        height: 6,//自定义宽高
    }
    return dataZoom;
}
/**
 * 图例组件
 */
export function getLegend({ data = ['图例'], scale = 1, icon = 'rect', itemWidth = 8, itemHeight = 8, ftSize = 16 }) {
    const legend = {
        data: data,
        selectedMode: true,   //不允许置灰
        itemWidth: itemWidth, // 设置宽度
        itemHeight: itemHeight, // 设置高度
        icon: icon,//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        top: 5,
        right: 10,
        padding: [2, 0, 0, 0],
        textStyle: {
            color: "#606266",
            fontSize: (ftSize * scale) < 10 ? 10 : (ftSize * scale),
        }
    }
    return legend;
}
/**
 * 提示框组件
 * @param {*} param0
 * @returns
 */
export function getTooltip({ scale = 1, ftSize = 16, formatter }) {
    const tooltip = {
        trigger: "axis",
        confine: true,
        textStyle: {
            fontSize: (ftSize * scale) < 10 ? 10 : (ftSize * scale),
        },
        axisPointer: {//鼠标放在图标上时显示的虚线样式
            type: "line",
            lineStyle: {
                color: "#cdcdcd",
            },
        },
        formatter: formatter

    }
    return tooltip;
}
/**
 * X轴配置
 * @param {*}
 * @returns
 */
export function getAxisX({ show = true, scale = 1, type = 'category', ftSize = 10, data = [], showLabel = true }) {
    const xAxis = {
        type: type,
        show: show,
        data: data,
        axisLine: {//X轴轴线设置
            lineStyle: {
                color: '#99C3E5'
            }
        },
        axisLabel: {//X轴刻度标签设置
            show: showLabel,
            fontSize: (ftSize * scale) < 10 ? 10 : (ftSize * scale),
            color: '#99C3E5',
            lineHeight: 20,
            interval: 0,
            formatter: function (param) {
                return param.length > 8 ? param.substring(0, 8) + "..." : param;
            }
        },
        axisTick: {
            show: false
        }
    }
    return xAxis;
}
/**
 * v
 * @param {*} param0
 * @returns
 */
export function getAxisY({ name = '', unit = '', type = 'value', show = true, data = [], scale = 1, position = 'left', ftSize = 10, splitLine = true, showMax = false, inside = false }) {
    if (unit) {
        name = `${name} (${unit})`;
    }
    const yAxis = {
        name: name,
        type: type,
        show: show,
        position: position,
        nameGap: 15,//坐标轴名称与轴线之间的距离。
        nameTextStyle: {
            color: "#ffffff",
            fontWeight: 400,
            fontSize: (ftSize * scale) < 10 ? 10 : (ftSize * scale),
            align: 'left',
            padding: inside ? [0, 0, 0, 0] : [0, 0, 0, -24]
        },
        axisLabel: {
            inside: inside,
            color: '#99C3E5',
            fontSize: (ftSize * scale) < 10 ? 10 : (ftSize * scale),
            formatter: function (value) {
                if (value == 0) {
                    return ''
                } else {
                    return value;
                }
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                width: 2,
                color: "#537DAA",  //y轴颜色
            },
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: splitLine,
            lineStyle: {
                color: "rgba(83, 125, 170, 0.2)",
            },
        },
    }
    if (showMax) {
        yAxis['interval'] = 50000;
        yAxis['showMinLabel'] = false;
        yAxis['showMaxLabel'] = true;
    }
    if (data && data.length > 0) {
        yAxis['data'] = data;
    }
    return yAxis;
}
